<template>
  <div class="home">
    <van-nav-bar
    class="app-nav-bar"
    >
    <van-button round class="searchbutton" icon="search" type="info" slot="title" >搜索</van-button>
    </van-nav-bar>

    <!-- 文章频道列表 -->
    <van-tabs v-model="active">
      <van-tab
      v-for="channel in channels"
      :title="channel.name"
      :key="channel.id"
      >{{channel.name}}</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getUserChannels } from '@/api/user'
export default {
  name: 'HomeIndex',
  comments: {},
  created () {
    this.loadChannels()
  },
  methods: {
    loadChannels () {
      getUserChannels().then(res => {
        console.log(res)
        this.channels = res.data.channels
      })
    }
  },
  data () {
    return {
      active: 0,
      channels: []
    }
  }
}
</script>

<style lang="less" scoped>
.home{
  /deep/ .van-nav-bar__title{
    max-width: unset;
  }
}

.searchbutton{
  width: 277px;
  height: 32px;
  background-color: #5babfb;
  border: none;
}
</style>
